<template>
  <div class="container rel-100 bg-white">
    <van-index-bar
      :index-list="indexList"
      v-if="list.length>0"
      :sticky="false"
      sticky-offset-top="1"
      highlight-color="#ff6600"
    >
      <div
        v-for="(cate,index) in list"
        :key="index"
        class="category-master van-hairline--left"
      >
        <van-index-anchor :index="cate.name">
          <van-image
            :src="cate.spread.image"
            fit="cover"
            v-if="cate.spread"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
            <template v-slot:error>
              <div>{{cate.name}}</div>
            </template>
          </van-image>
        </van-index-anchor>

        <div
          v-for="(item,ci) in cate.children"
          :key="ci"
          class="category-subitems"
        >
          <van-divider>{{item.name}}</van-divider>
          <van-grid
            square
            :column-num="3"
            v-if="item.children.length>0"
            :border="false"
          >
            <van-grid-item
              v-for="(c,k) in item.children"
              :key="k"
              :icon="c.image"
              :text="c.name"
              :to="goto(c)"
            />
          </van-grid>
        </div>
      </div>

    </van-index-bar>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Button,
  Loading,
  Image,
  Divider,
  IndexBar,
  IndexAnchor
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Loading.name]: Loading,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor
  },

  data () {
    return {
      list: [],
      indexList2: []
    }
  },
  created () {
    this.onLoad()
    console.log(this.currentContact)
  },
  watch: {
    list: {
      handler (cv, ov) {
        if (cv.length > 0) {
          this.indexList2 = cv.map(x => {
            return x.name
          })
        }
      },
      deep: true
    }
  },
  computed: {
    indexList () {
      return this.list.map(item => {
        return item.name
      })
    },
    currentContact () {
      // let id = this.chosenAddressId
      // let data = this.list.filter(item => item.id === id)[0]
      let data = this.list.map(x => {
        return x.name
      }) // 生成数组
      console.log(data)
      return data
    }
  },
  methods: {
    onLoad () {
      this.axios
        .get('/shop/category', {
          headers: { FastMode: true }
        })
        .then(response => {
          this.list = response.data
          console.log(this.list)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    goto (item) {
      if (item.type === 'categorys') {
        return {
          name: 'category/:id',
          params: {
            id: item.id
          }
        }
      } else {
        return {
          name: 'goods/:id',
          params: {
            id: item.goods_id
          }
        }
      }
    },
    onCheck (index, e) {
      console.log(index)
      console.log(e)
      var sortMenu = this.$refs.sortMenu // .getScrollerRect()
      console.log('[sortMenu]', sortMenu)
    },
    onClick (id) {
      this.$router.push({ name: 'goods/:id', params: { id: id } })
      // pushToArticlePage(id)
    },
    arrayUnique (arr) {
      let result = []
      let hash = {}
      for (let i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem.id]) {
          result.push(elem)
          hash[elem.id] = true
        }
      }
      return result
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/ .van-index {
  &-bar {
    padding-left: 30%;
    height: 100%;
    overflow-y: auto;
    &__sidebar {
      left: 0;
      right: auto;
      width: 30%;
      height: 100%;
      z-index: 0;
      top: 0;
      transform: none;
      overflow-x: hidden;
      overflow-y: auto;
    }
    &__index {
      padding: 8px;
      line-height: 24px;
      height: 40px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      position: relative;
      &::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border: 0 solid #ebedf0;
        border-bottom-width: 1px; /*no*/
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
  }
  &-anchor {
    min-height: 80px;
    .van-image {
      width: 100%;
    }
  }
}
.category {
  &-master {
    min-height: 60vh;
    position: relative;
  }
  &-subitems {
    .van-grid-item {
      &__text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
